import React,{Component} from "react"
import {
    Steps,
    Button,
    message,
    Form,
    Input,
    Cascader
} from "antd"
import {advacecatetory} from "&"
import {UserOutlined} from "@ant-design/icons"
import {RichEditor} from "./richeditor"
import "./index.scss"
import {axios} from "&/axios"
const { Step } = Steps;
const steps = [
    { title: "基本信息", desc: "选择标题和分类" },
    { title: "意见内容", desc: "用心填写你的建议" },
    { title: "提交意见", desc: "谢谢你的建议" }
]
export default class AdviseCreate extends Component {
    state = {
        current: 0,
        formData:null,
        content:null
    }
    
  next() {
    if(this.state.current<steps.length-1){
        if(this.state.current==0){
            this.refs.form.validateFields()
            .then(value=>{
                this.setState({
                    current:++this.state.current,
                    formData:value
                })
            }).catch(err=>{
                message.error("请完善信息")
            })
        }
        if(this.state.current==1){
            this.setState({
                current:++this.state.current
            })
        }
    }
  }
  getContent=(content)=>{
      this.setState({
        content
      })
  }

  prev() {
    const current = this.state.current - 1;
    this.setState({ current });
  }
  getCategory=(value)=>{

  }
  handleSumitAdvise=()=>{
    axios.post("/api/addadvise",{
        content:this.state.content,
        ...this.state.formData
    }).then(res=>{
        if(res.data.type){
            this.props.history.push("/main/advise/list?from=create")
        }
    })
  }
    render() {
        const { current } = this.state;
        return (
            <div>
                <h2> 踊跃发表建议  -  你多提议,我们将更好的服务社区    </h2>
                <div style={{ marginTop: 20 }}>
                    <Steps current={this.state.current}>
                        {steps.map((item,i) => (
                            <Step key={i} title={item.title} description={item.desc}/>
                        ))}
                    </Steps>
                </div>
                <div className="steps-content" style={{ display: current == 0 ? 'block' : 'none',marginTop:40}}>
                    <Form
                        name="basic"
                        ref="form"
                        layout={{
                            labelCol: {
                                span: 4,
                            },
                            wrapperCol: {
                                span: 20,
                            },
                        }}
                        style={{ width: 300 }}
                    >
                        <Form.Item
                            label="意见标题"
                            name="title"
                            rules={[
                                {
                                    required: true,
                                    message: '请输入',
                                }
                            ]}
                        >
                            <Input
                                prefix={<UserOutlined className="site-form-item-icon" />}
                                placeholder="请输入宝贵的意见"
                            />
                        </Form.Item>
                        <Form.Item
                            label="意见分类"
                            name="category"
                            rules={[
                                {
                                    required: true,
                                    message: '请选择',
                                }
                            ]}
                        >
                            <Cascader

                                onChange={this.getCategory} options={advacecatetory} changeOnSelect placeholder="请选择" />
                        </Form.Item>
                    </Form>


                </div>
                <div className="steps-content" style={{display:current==1?'block':'none',height:240}}>
                    <RichEditor getContent={this.getContent} />
                </div>
                <div className="steps-content" style={{display:current==2?'block':'none'}}>
                </div>
                <div className="steps-action">
                    {current < steps.length - 1 && (
                        <Button type="primary" onClick={() => this.next()}>
                            下一步
                        </Button>
                    )}
                    {current === steps.length - 1 && (
                        <Button type="primary" onClick={this.handleSumitAdvise}>
                            提交意见
                        </Button>
                    )}
                    {current > 0 && (
                        <Button style={{ margin: '0 8px' }} onClick={() => this.prev()}>
                            上一步
                        </Button>
                    )}
                </div>

            </div>

        )
    }
}